<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>科普</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../stylesheets/usual_class.css">
    <script src="../js/angular-1.5.7.js"></script>
    <script src="..//js/angular-route.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cc72db5d6f8295a36c30486830468a93"></script>
    <script src="js/xydata.js"></script>
    <style>
    #map_box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*padding-top: 48px;*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #map_container {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <!-- <div class="container appbar bg-green c-w">
        <div class="w72">
            <div class="menu-f pl16">
                <svg class="icon icon20">
                    <use xlink:href="#icon-menu"></use>
                </svg>
            </div>
        </div>
        <div class="flex1">
            <p class="fs16 ta-c c-text-w">科普</p>
        </div>
        <div class="w72">
        </div>
    </div> /-->
    <div id="map_box">
        <div id="map_container"></div>
    </div>
</body>
<script>
/**
 * 构建地图
 * @type {AMap}
 */

var mapObj = new AMap.Map('map_container', {
    zoom: 3, //缩放级别
    center: [113.544184, 22.214936], //中心点
    isHotspot: true, //地图热点
    keyboardEnable: true, //键盘控制
    mapStyle: 'fresh', //normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm样式)
    touchZoom: false,
    zooms: [3, 6]
});
/**
 * 工具条&比例尺
 * @param  {AMap}   ) {                           var toolBar [description]
 * @return {[type]}   [description]
 */
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
    //TODO  创建控件并添加
    var toolBar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    mapObj.addControl(toolBar);
    mapObj.addControl(scale);
});
/**
 * 创建提示窗体
 * @type {AMap}
 */
var infowindow = new AMap.InfoWindow({
    content: '<p>ok</p>',
    offset: new AMap.Pixel(0, -30),
    size: new AMap.Size(230, 0)
});

var markers = [];

(function() {
    /**
     * 初始化标记
     * @type {AMap}
     */
    //province见Demo引用的JS文件
    for (var i = 0; i < provinces.length; i++) {
        /**
         * 根据设定的数据类型进行分发
         * @type {[type]}
         */
        var type = provinces[i].type;
        var icon = new AMap.Icon({
            image: 'http://vdata.amap.com/icons/b18/1/2.png',
            size: new AMap.Size(24, 24) //控制图标大小
        });
        switch (type) {
            case 0:
                marker = new AMap.Marker({
                    icon: icon, //content将会覆盖icon
                    position: provinces[i].center.split(','),
                    offset: new AMap.Pixel(-16, -16), //icon偏移量
                    zIndex: 101,
                    title: provinces[i].name,
                    topWhenMouseOver: true,
                    raiseOnDrag: true, //拖拽效果
                    clickable: true,
                    map: mapObj
                });
                markers.push(marker);
                break;
            case 1:
                marker = new AMap.Marker({
                    position: provinces[i].center.split(','),
                    title: provinces[i].name,
                    map: mapObj
                });
                markers.push(marker);
                break;
            case 2:
                marker = new AMap.Marker({
                    position: provinces[i].center.split(','),
                    title: provinces[i].name,
                    // offset: new AMap.Pixel(0, 0),
                    map: mapObj
                });
                markers.push(marker);
                break;
        };
        /**
         * 设置弹窗显示内容
         * @type {[type]}
         */
        markers[i].content = provinces[i].name;
    };
    /**
     * 监听标记点击事件
     * @param  {[type]} var i             [description]
     * @return {[type]}     [description]
     */
    for (var i = markers.length - 1; i >= 0; i--) {
        AMap.event.addListener(markers[i], 'click', function(ev) {
            console.log(this)

            infowindow.setContent(ev.target.content);
            infowindow.open(mapObj, this.getPosition());
        });
    }
})()
/**
 * 自适应调整缩放比例
 */
mapObj.setFitView();
</script>

</html>
